<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>农业视频</title>


    <!-- Expand styles -->
    <link href="../css/app/app.css" rel="stylesheet">
    <link href="../css/app/default.css" rel="stylesheet">
    <link href="../css/mui/mui.css" rel="stylesheet">


    <style type="text/css">
        .popWindow {
            background-color: #9D9D9D;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            filter: alpha(opacity=50);
            opacity: 0.5;
            z-index: 1000;
            position: absolute;
    
        }

    </style>
</head>

<body>
    <!-- header -->
    <div id="popWindow" class="popWindow" style="display: none;"></div>
    <div class="yang">
        <div class="widget-default">
            <div class="farming-tab border1">
                <div id="segmentedControl" class="mui-segmented-control">
                    <a class="mui-control-item mui-active" sourceType="concern">关注</a>
                    <a class="mui-control-item" sourceType="recommend">推荐</a>
                    <a class="mui-control-item" sourceType="AGRT_TECH_VIDEO">农技视频</a>
                    <a class="mui-control-item" sourceType="SMALL_VIDEO">小视频</a>
                </div>
            </div>
            <div class="display-flex farm-fixed widget-default" id="firstTypeDiv">
                <div class="farming2-tab">
                    <div
                        class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
                        <div class="mui-scroll" id="firstTypeList">

                        </div>
                    </div>
                </div>
                <div class="tab-right display-flex align-items-center justify-content-center" onclick="selectType()">
                    <img class="farm-icon1" src="../img/menu.png" alt="">
                </div>
            </div>
        </div>
        <div id="pullrefresh" class="mui-content mui-scroll-wrapper" style="margin-top: 60px;">
            <div class="mui-scroll">
                <!-- 关注 -->
                <div class="mui-control-content mui-active">
                    <div id="expertListDiv">
                        <div class="mui-scroll-wrapper diff-scroll">
                            <div class="mui-scroll display-flex" id="expertList">
                            </div>
                        </div>
                        <div class='free-box margin-b-10'></div>
                    </div>
                    <!-- 视频列表 -->
                    <div id="videoList">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="hobby-footer1 bg-transparent">
        <div class="display-flex align-items-center bot-issue" id="imgpop">
            <img class="issue-img" src="../img/issue.png" alt="">
        </div>

    </div>
    <div class="propbottom">
        <div class="display-flex align-items-center justify-content-around widget-default padding-t-15 padding-b-15">
            <div class="display-flex flex-column align-items-center" id="leftProp">
                <img class="issue-img" src="../img/farm-video.png" alt="">
                <span class="font-17 blue1">农技视频</span>
            </div>
            <div class="display-flex flex-column align-items-center" id="rightProp">
                <img class="issue-img" src="../img/little-video.png" alt="">
                <span class="font-17 blue1">小视频</span>
            </div>
        </div>
    </div>
    <script src="../js/dsbridge.js"></script>
    <script src="../js/jquery.js"></script>
    <script src="../js/mui/mui.js"></script>
    <script src="../js/mui/mui.picker.min.js"></script>
    <script src="../js/layer.js"></script>
    <script src="../js/app/app-base.js"></script>
    <script src="../js/app/app-url.js"></script>
    <script src="../js/app/app-ajax.js"></script>
    <script>
        var page = 1;
        var limit = 10;
        var index = 0;
        var all_data = new Array();
        //用户已经关注数量(未关注和已关注页面显示不同)
        var userConcernNum = 0;
        //页面类型 concern-关注 recommend-推荐 AGRT_TECH_VIDEO-农技视频 SMALL_VIDEO-小视频
        var sourceType = 'concern';
        //一级分类code
        var firstTypeCodeTmp = '';
        var firstTypeCode = '';
        //关注用户id
        var concernUserId = '';
        //点赞数据index
        var praiseIndex = -1;
        //分享数据index
        var shareIndex = -1;
        $(document).ready(function () {

            dsBridge.register('share', function () {
                share();
            })

            mui.init({
                pullRefresh: {
                    container: '#pullrefresh',
                    down: {
                        auto: true, // 首次进入自动加载
                        callback: pulldownRefresh
                    },
                    up: {
                        contentrefresh: '正在加载...',
                        callback: pullupRefresh
                    }
                }
            });
            //获取视频类型
            getVideoType();
        })

        //获取是否有关注用户
        function getUserConcernNum() {
            var data = {
                userAccId: getUserId()
            }
            getServerData(url_agriMyVideoInfo_getMyPersonVO, data);
        }

        //一级类型切换
        mui("#segmentedControl").on('tap', '.mui-control-item', function () {
            $("#videoList").html("");
            sourceType = $(this).attr("sourceType");
            pulldownRefresh();
        });

        //二级类型切换
        mui("#firstTypeList").on('tap', '.mui-control-item', function () {
            firstTypeCodeTmp = $(this).attr("code");
            pulldownRefresh();
        });

        //关注/取消关注
        mui(".mui-content").on('tap', '.concernOper', function () {
            concernUserId = $(this).attr("userAccId");
            if ($(this).hasClass("bc-head")) {
                //关注
                var data = {
                    userId: getUserId(),
                    itemType: 20,
                    itemId: concernUserId,
                    actionType: 5,
                    channel: 2
                }
                getServerData(url_commonoper_operAction + '?type=concern', data);
            } else {
                //取消关注
                var data = {
                    userId: getUserId(),
                    itemId: concernUserId,
                    actionType: 5
                }
                getServerData(url_oper_action_cancel + '?type=concern', data);
            }

        });

        //获取视频类型
        function getVideoType() {
            var data = {}
            getServerData(url_agrivideoInfo_getVideoType, data);
        }

        /**
         * 下拉刷新具体业务实现
         */
        function pulldownRefresh() {
            //获取是否有关注用户
            getUserConcernNum();
            if (sourceType == 'concern' || sourceType == 'recommend') {
                firstTypeCode = '';
                $("#firstTypeDiv").hide();
            } else {
                firstTypeCode = firstTypeCodeTmp;
                $("#firstTypeDiv").show();
            }
            if (sourceType == 'concern') {
                $("#pullrefresh").css("margin-top", "60px");
                //推荐用户未关注的专家列表
                recommendUnConcernExpertList();
                $("#expertListDiv").show();
            } else {
                if (sourceType == 'recommend') {
                    $("#pullrefresh").css("margin-top", "60px");
                } else {
                    $("#pullrefresh").css("margin-top", "115px");
                }
                $("#expertListDiv").hide();
            }
            page = 1;
            var data = {
                sourceType: sourceType,
                userAccId: getUserId(),
                firstTypeCode: firstTypeCode,
                page: page,
                limit: limit
            }
            getServerData(url_agrivideoInfo_queryList, data);
        }

        /**
         * 上拉加载具体业务实现
         */
        function pullupRefresh() {
            page++;
            var data = {
                sourceType: sourceType,
                userAccId: getUserId(),
                firstTypeCode: firstTypeCode,
                page: page,
                limit: limit
            }
            getServerData(url_agrivideoInfo_queryList, data);
        }

        //推荐用户未关注的专家列表
        function recommendUnConcernExpertList() {
            var data = {
                userAccId: getUserId(),
                limit: 10
            }
            getServerData(url_agrivideoInfo_recommendUnConcernExpertList, data);
        }


        function getServerDataSuccess(url, data) {
            switch (url) {
                case url_agriMyVideoInfo_getMyPersonVO:
                    userConcernNum = data.data.followNum;
                    break;
                case url_agrivideoInfo_getVideoType:
                    var firstTypeList = data.data;
                    var h5 = '';
                    if (firstTypeList != null && firstTypeList.length > 0) {
                        $.each(firstTypeList, function (index, item) {
                            h5 += '<a class="mui-control-item ' + (index == 0 ? 'mui-active' : '') +
                                '" code="' + item.code + '">' + item.name + '</a>';
                            if (index == 0 && isEmpty(firstTypeCodeTmp)) {
                                firstTypeCodeTmp = item.code;
                            }
                        })
                    }
                    $("#firstTypeList").html(h5);
                    break;
                case url_agrivideoInfo_recommendUnConcernExpertList:
                    var list = data.data;
                    var h5 = '';
                    var h5_2 = '';
                    if (list != null && list.length > 0) {
                        h5_2 +=
                            '<p class="widget-default widget-body black font-16 font-weight no-margin padding-b-5">推荐关注</p>';
                        $.each(list, function (index, item) {
                            var expertAreaShowList = item.expertAreaShowList;
                            if (index < 5) {
                                h5 += '<div class="tuijian-box">' +
                                    '<img class="farm-head" src="' + (isEmpty(item.headPortrait) ?
                                        "../img/headimg.png" : showSmallImg(item.headPortrait)) +
                                    '" alt="" userAccId="' + item.userAccId + '">' +
                                    '<p class="elli1 font-weight text-center black font-16 font-weight no-margin">' +
                                    item.userName + '</p>' +
                                    '<div class="farm-label text-center margin-t-5">' +
                                    '<a class="white font-12 bc-head concernOper" userAccId="' + item
                                    .userAccId +
                                    '">关注</a>' +
                                    '</div>' +
                                    '</div>';
                            } else {
                                h5_2 += '<div class="widget-default margin-b-3 widget-body">' +
                                    '<div class="display-flex">' +
                                    '<img class="farm-head" src="' + (isEmpty(item.headPortrait) ?
                                        "../img/headimg.png" : showSmallImg(item.headPortrait)) +
                                    '" alt="" userAccId="' + item.userAccId + '">' +
                                    '<div class="margin-l-10 width-100">' +
                                    '<div class="display-flex align-items-center justify-content-between width-100">' +
                                    '<div class="display-flex flex-column justify-content-between"><span class="elli1 font-weight black font-16 font-weight">' +
                                    item.userName +
                                    '</span><p class="gray font-12 padding-t-10 no-margin">粉丝数：' + item
                                    .fansNum + '<span class="padding-l-15">视频量：' + item.agriVideoNum +
                                    '</span></p></div>' +
                                    '<div class="farm-label text-center margin-t-5"><a class="white font-12 bc-head concernOper" userAccId="' +
                                    item.userAccId + '">关注</a></div>' +
                                    '</div>' +
                                    '<p class="black font-15 elli1 no-margin">' + item.expertAreaShowList.join(
                                        " ") + '</p>' +
                                    '</div>' +
                                    '</div>' +
                                    '</div>';
                            }
                        })
                    }
                    $("#expertList").html(h5);
                    if (userConcernNum <= 0) {
                        $("#videoList").html(h5_2);
                    }
                    if (sourceType == 'concern' && userConcernNum <= 0) {
                        mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
                        mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);
                    }
                    break;
                case url_agrivideoInfo_queryList:
                    if (sourceType == 'concern' && userConcernNum <= 0) {
                        return;
                    }
                    var list = data.data;
                    if (page == 1) {
                        index = 0;
                        all_data.length = 0;
                    }
                    var h5 = '';
                    if (list != null && list.length > 0) {
                        if (sourceType != 'SMALL_VIDEO') {
                            $.each(list, function (sindex, item) {
                                all_data.push(item);
                                h5 +=
                                    '<div class="widget-body widget-default margin-b-5 padding-t-158 " id="' +
                                    index + '">' +
                                    '<div class="display-flex padding-b-10">' +
                                    '<img class="farm-head" src="' + (isEmpty(item.headPortrait) ?
                                        "../img/headimg.png" : showSmallImg(item.headPortrait)) +
                                    '" alt="" userAccId="' + item.userAccId + '">' +
                                    '<div class="display-flex flex-column justify-content-between margin-l-10">' +
                                    '<span class="elli1 font-weight black font-16 font-weight no-margin">' +
                                    item
                                    .userName + '</span><span class="gray font-12">' + item.createTime
                                    .substring(0,
                                        10) + '</span>' +
                                    '</div>' +
                                    '</div>' +
                                    '<div class="margin-t-5 trade-list videoDetail" dId="' + index + '">' +
                                    '<div class="position-open1"><img class="open-img" src="../img/open.png" alt=""></div>' +
                                    '<div class="height177 width-100"><img class="height177 width-100" src="' +
                                    showSmallImg(item.coverImg) + '" alt=""></div>' +
                                    '<p class=" elli1 black font-15 padding-t-15 padding-l-5 no-margin">' + item
                                    .title + '</p>' +
                                    '</div>' +

                                    '<div class="display-flex justify-content-end align-items-center padding-t-6">' +
                                    '<img class="farm-icon evalOper" src="../img/new-expert/info.png" alt="">' +
                                    '<span class="gray font-12 padding-l-5 padding-r-10 evalOper">' + item
                                    .evaluationNum +
                                    '</span>' +
                                    '<img class="farm-icon shareOper" src="../img/new-expert/share.png" alt="">' +
                                    '<span class="gray font-12 padding-l-5 padding-r-10 shareOper">' + item
                                    .shareNum + '</span>' +
                                    '<img class="farm-icon praiseOper praiseImg" src="' + (item.isPraise == 1 ?
                                        "../img/applaud.png" : "../img/zai.png") + '" alt="">' +
                                    '<span class="gray font-12 padding-l-5 praiseOper praiseNum">' + item
                                    .praiseNum + '</span>' +
                                    '</div>' +
                                    '</div>';
                                index++;
                            })
                        } else {
                            h5 += '<div class="display-flex flex-warp">';
                            $.each(list, function (sindex, item) {
                                all_data.push(item);
                                h5 += '<div class="littlevideo-box videoDetail" id="' + index + '" dId="' +
                                    index + '">' +
                                    '<img src="' + showSmallImg(item.coverImg) +
                                    '" alt="" class="littlevideo-img">' +
                                    '<div class="littlevideo-shade">' +
                                    '<p class="elli2 white font-12">' + item.title + '</p>' +
                                    '<p class="white font-12">' + item.pageViewNum +
                                    '次<span class="padding-l-10">播放</span></p>' +
                                    '</div>' +
                                    '</div>';
                                index++;
                            })
                            h5 += '</div>';
                        }
                    }
                    if (page == 1) {
                        mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
                        if (list.length > 0) {
                            mui('#pullrefresh').pullRefresh().refresh(true);
                        }
                        $("#videoList").html(h5);
                    } else {
                        $("#videoList").append(h5);
                        mui('#pullrefresh').pullRefresh().endPullupToRefresh(list.length != limit);
                    }
                    break;
                case url_commonoper_operAction + '?type=concern':
                    //关注
                    $(".concernOper[userAccId='" + concernUserId + "']").text("已关注").attr("class",
                        "gray font-12 farm-label-bg concernOper");
                    break;
                case url_oper_action_cancel + '?type=concern':
                    //取消关注
                    $(".concernOper[userAccId='" + concernUserId + "']").text("关注").attr("class",
                        "white font-12 bc-head concernOper");
                    break;
                case url_commonoper_operAction + '?type=praise':
                    $(".widget-body[id='" + praiseIndex + "']").find(".praiseImg").attr("src", "../img/applaud.png");
                    var $praiseNum = $(".widget-body[id='" + praiseIndex + "']").find(".praiseNum");
                    var praiseNum = Number($praiseNum.text()) + 1;
                    $praiseNum.text(praiseNum);
                    break;
                case url_oper_action_cancel + '?type=praise':
                    //取消点赞
                    $(".widget-body[id='" + praiseIndex + "']").find(".praiseImg").attr("src", "../img/zai.png");
                    var $praiseNum = $(".widget-body[id='" + praiseIndex + "']").find(".praiseNum");
                    var praiseNum = Number($praiseNum.text()) - 1;
                    if (praiseNum < 0) {
                        praiseNum = 0;
                    }
                    $praiseNum.text(praiseNum);
                    break;
            }
        }

        function getServerDataFailed(url, data) {
            mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
            mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);
        }

        //去个人主页
        mui(".yang").on('tap', '.farm-head', function () {
            localStorage.setItem("person-id", $(this).attr("userAccId"));
            dsBridge.call("toPersonHomePage");
        });

        //详情
        mui("#videoList").on('tap', '.videoDetail', function () {
            var detailIndex = $(this).attr("dId");
            log(all_data[detailIndex].id)
            if (all_data[detailIndex].type == 'AGRT_TECH_VIDEO') {
                //农技视频
                localStorage.setItem("video-detail-id", all_data[detailIndex].id);
                dsBridge.call("goAgriTechVideoDetail", "");
            } else if (all_data[detailIndex].type == 'SMALL_VIDEO') {
                //小视频
                dsBridge.call("smallVideo", all_data[detailIndex].id);
            }
        });
        //评论
        mui("#videoList").on('tap', '.evalOper', function () {
            var evalIndex = $(this).parents(".widget-body").attr("id");
            localStorage.setItem("comment-object-id", all_data[evalIndex].id);
            dsBridge.call("goEvalOper");

        });
        //分享
        mui("#videoList").on('tap', '.shareOper', function () {
            shareIndex = $(this).parents(".widget-body").attr("id");
            dsBridge.call("share", all_data[shareIndex]);
        });

        //点赞/取消点赞
        mui("#videoList").on('tap', '.praiseOper', function () {
            event.stopPropagation();
            praiseIndex = $(this).parents(".widget-body").attr("id");
            if ($(this).parents(".widget-body").find("img.praiseImg").attr("src") == '../img/zai.png') {
                //点赞
                var data = {
                    userId: getUserId(),
                    itemType: 19,
                    itemId: all_data[praiseIndex].id,
                    actionType: 2,
                    channel: 2
                }
                getServerData(url_commonoper_operAction + '?type=praise', data);
            } else {
                //取消点赞
                var data = {
                    userId: getUserId(),
                    itemId: all_data[praiseIndex].id,
                    actionType: 2
                }
                getServerData(url_oper_action_cancel + '?type=praise', data);
            }

        });
        mui('.mui-scroll-wrapper').scroll({
            scrollX: true,
            indicators: false,
            deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
        });

        //类型选择
        function selectType() {
            localStorage.setItem("video-list-type", sourceType);
            localStorage.setItem("video-list-firstTypeCode", firstTypeCode);
            dsBridge.call("goSelectType", "");
        }

        //拍摄点击事件
        $("#imgpop").click(function () {
            $(".propbottom").show();
            $("#popWindow").show();
        })

        $("#leftProp").click(function () {
            //农技视频
            $(".propbottom").hide();
            $("#popWindow").hide();
            localStorage.setItem("video-id", "");
            localStorage.setItem("video-type", "AGRT_TECH_VIDEO");
            dsBridge.call("addVideo","");
        })
        $("#rightProp").click(function () {
            //小视频
            $(".propbottom").hide();
            $("#popWindow").hide();
            localStorage.setItem("video-id", "");
            localStorage.setItem("video-type", "SMALL_VIDEO");
            dsBridge.call("addVideo","");
        })
        $("#popWindow").click(function () {
            $(".propbottom").hide();
            $("#popWindow").hide();
        })
    </script>
</body>

</html>